import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { createElement, render } from "./jsxHandle";
const root = ReactDOM.createRoot(document.getElementById("root"));

const rootDom = document.getElementById("root");

const x = 1;
const y = 2;

const jsxObj = createElement(
  "div",
  {
    className: "container",
  },
  "文本标签",
  createElement(
    "div",
    { className: "box",style:{ background: "#f00"} },
    createElement("span", null, x),
    createElement("span", null, x)
  )
);

console.log("jsxObj: ", jsxObj);

render(jsxObj, rootDom);

// root.render(
//   <div className="container">
//     <h2 className="h2" style={{ background: "#f00" }}>
//       h2标签
//     </h2>
//     <div className="box">
//       <span>{x}</span>
//       <span>{y}</span>
//     </div>
//   </div>
// );

// console.log(
//   JSON.stringify(
//     createElement(
//       React.Fragment,
//       null,
//       createElement(
//         "h2",
//         {
//           clsss: "h2",
//           style: {
//             background: "#f00",
//           },
//         },
//         "h2\u6807\u7B7E"
//       ),
//       createElement(
//         "div",
//         {
//           className: "box",
//         },
//         createElement("span", null, x),
//         createElement("span", null, y)
//       )
//     ),
//     null,
//     2
//   )
// );
